<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
	<head>
		<title>sysMenuManager</title>
		<meta HTTP-EQUIV="refresh" CONTENT="3000">
		<script type="text/javascript" src="../resources/js/jquery.min.js"></script>
		<script type="text/javascript" src="../resources/js/operamasks-ui.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../resources/css/apusic/om-apusic.css" />
		<!--<link rel="stylesheet" type="text/css" href="../resources/css/default/om-default.css" />-->
		<script type="text/javascript">
    	$(document).ready(function() {
    		//树的外部容器panel
    		$('#tree-panel').omPanel({
    			title:'菜单列表',
    			width:'fit',
    			height:500,
    			collapsible:false
    		});
    		
    		//定义右键菜单
    		var menu = $('#menu').omMenu({
    			contextMenu:true,
    			dataSource : [{id:'001',label:'增加节点',icon:'../resources/images/add.png'},
                              {id:'002',label:'修改节点',icon:'../resources/images/edit.png'},
                              {id:'003',label:'删除节点',icon:'../resources/images/remove.png'}
                             ],
                onSelect:function(item){
                	var treedata = $("#tree").omTree("getSelected");
                	if(item.id === "001"){
                		isAdd = true;
                		showDialog('新增');
                	}else if(item.id === "002"){
                		isAdd = false;
                		showDialog('修改',treedata);//显示修改dialog,传入选择的节点
                	}else if(item.id === "003"){
                		var submitData={
                    			tsmId:treedata.smid
                            };
                    	showConfirm(submitData,treedata);
                	};
                }
    		});

    		//删除节点方法
    		function showConfirm(submitData,treedata){
				 $.omMessageBox.confirm({
			           title:'确认删除',
			           content:'删你确定要这样做吗？',
			           onClose:function(v){
			           		if(v === true){
			           			$.post('../sysMenu/delete.action',submitData,function(){
	                				$('#tree').omTree('refresh');
		                        	$.omMessageTip.show({title: "操作成功", content: "节点("+treedata.text+")删除成功", timeout: 2000});
	                    		});
				           	}else{
								return;
					        }
			           }
			       });
			};
			
    		//点击body区隐藏右键菜单
    		$("body").bind("click", function(){
            	$("#menu").omMenu("hide");
            });
    		//点击tree-panel区隐藏右键菜单
    		$("#tree-panel").bind("click", function(){
            	$("#menu").omMenu("hide");
            });

    		//定义菜单树
    		$('#tree').omTree({
    			dataSource : '../sysMenu/getSysMenu.action',
    			simpleDataModel: true,
    			beforeExpand:function(node){
    				//alert(node);
    				var nodeDom = $("#"+node.id);
    			},
    			onClick:function(){
    				$("#menu").omMenu('hide');
    			},
    			onRightClick:function(nodeData,e){
    				$("#menu").omMenu("disableItem", "003");
    				$("#tree").omTree("select", nodeData);
    				//如果选中的节点子节点不为空,不能删除
        			if(nodeData.children == null){
            			$("#menu").omMenu("enableItem", "003");
            		}else{
            			$("#menu").omMenu("disableItem", "003");
                	};
                	$("#menu").omMenu('show',e);
    				e.preventDefault(); 
    			}
    		});
    		var isAdd = true; //弹出窗口中是添加操作还是修改操作？

			//状态combo
			var statuCombo = $("input[name='smflag']").omCombo({
				dataSource:[{text:'可用',value:'1'},
							{text:'禁用',value:'0'}],
				value :'1',
				editable :false,
				width :'213px'
			});

			function resetForm(){
				$("input[name='smcode']").val('');
                $("input[name='smname']").val('');
                $("input[name='smimage']").val('');
                $("input[name='smurl']").val('');
                $("input[name='smorder']").val('');
                statuCombo.omCombo('value',"1");
			};
			
            //定义编辑弹出窗口
            var editDialog = $('#editDialog').omDialog({
            	autoOpen: false,
            	width:400,
            	modal: true,
            	resizable : false,
            	buttons:[{
            		text:'提交',
            		click:function(){
            			var treedata= $('#tree').omTree('getSelected');
            			var submitData={
							operation:isAdd?'add':'modify',
							tsmId:treedata.smid,
							smcode:$("input[name='smcode']").val(),
							smname:$("input[name='smname']").val(),
							smorder:$("input[name='smorder']").val(),
							smimage:$("input[name='smimage']").val(),
				            smurl:$("input[name='smurl']").val(),
				            smflag:$("input[name='smflag']").val()
                    	};
            			$.post('../sysMenu/edit.action',submitData,function(){
							if(isAdd){
								$('#tree').omTree('refresh');
								$.omMessageTip.show({title: "操作成功", content: "添加菜单成功", timeout: 1500});
							}else{
								$('#tree').omTree('refresh');
								$.omMessageTip.show({title: "操作成功", content: "添加菜单成功", timeout: 1500});
							}
							editDialog.omDialog("close");//关闭dialog
                		});
            		}
            	},{
            		text:'重置',
            		click:function(){
            			resetForm();
            		}
            	}]
            });
            //弹出编辑窗口
            var showDialog = function(title,rowdata){
            	rowdata = rowdata || {};
            	$("input[name='smcode']").val(rowdata.id);
                $("input[name='smname']").val(rowdata.text);
                $("input[name='smimage']").val(rowdata.icon);
                $("input[name='smurl']").val(rowdata.url);
                $("input[name='smorder']").val(rowdata.order);
                statuCombo.omCombo('value',rowdata.useflg===null?'1':rowdata.useflg);
            	editDialog.omDialog("option", "title", title);
            	editDialog.omDialog('open');
            };
            //表单验证
            var validator  = $('#menuForm').validate({
				rules:{
            		smcode:{required:true},
            		smname:{required:true},
            		smurl:{required:true},
            		smflag:{required:true}
				},
				messages:{
					smcode:{required:"编号不能为空"},
					smname:{required:"名称不能为空"},
            		smurl:{required:"地址不能为空"},
            		smflag:{required:"状态不能为空"}
				}
            });
    	});	
    </script>
    
    <style type="text/css">
    #tree{
     background: none repeat scroll 0 0 #fffacd;
     overflow:auto;
     height:450px; 
     width:280px; 
    }
    input{
	 margin-right: 20px;
	 border-width: 1.5px;
	 border-color: #cccccc;
	 background-color: #f6f6f6;
	 margin-bottom: 1px;
	 height: 20px;
	 width: 210px;
	 font-weight: bold;
	}
    </style>
	</head>
	<body>
		<div id="tree-panel" style="background-color: white;">
			<div style="width: 280px; border: 2px solid #a9a9a9;">
				<div id="tree" class="tree"></div>
			</div>
		</div>
		<div id="menu"></div>
		<div id="messageBox"></div>
		<div id="editDialog">
			<form id="menuForm">
				<table  width="300">
					<tr>
						<td>菜单编号:</td>
						<td><input name="smcode" type="text"></td>
					</tr>
					<tr>
						<td>菜单名称:</td>
						<td><input name="smname" type="text"></td>
					</tr>
					<tr>
						<td>菜单图片:</td>
						<td><input name="smimage" type="text" ></td>
					</tr>
					<tr>
						<td>菜单地址:</td>
						<td><input name="smurl" type="text" ></td>
					</tr>
					<tr>
						<td>菜单顺序:</td>
						<td><input name="smorder" type="text" ></td>
					</tr>
					<tr>
						<td>状         态:</td>
						<td><input name="smflag" ></td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>
